<template>
    <view class="bgView">
        <view class="header">
            <view class="userInfo">
                <text class="userName">{{userName}}</text>
                <text class="userPhone">{{userPhone}}</text>
            </view>
            <image :src="src" mode="aspectFill"></image>
        </view>
        <view class="time">
            打卡时间：{{systemDate}}
        </view>
        <view class="lineH20"></view>
        <view class="locationTitle">当前位置</view>
        <view class="locationView">
            <view class="locationInfo">
                <uni-icon size="15" type="location"></uni-icon>
                <view class="location">{{address}}</view>
            </view>
            <view class="getLocation" @click="getLocation">重新定位</view>
        </view>
        <map :latitude="location.latitude" :longitude="location.longitude" :markers="covers" polyline="polyline">
        </map>
        <button type="primary" :disabled="buttonDisabled" @click="clockInAction">{{buttonTitle}}</button>
        <view class="resave-local" @click="setNewLocation">重新设置位置</view>
    </view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import amap from "../../../common/amap-wx.js"

	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;

	export default {
		components: {
			uniIcon
		},
		data () {
			return {
				location: {},
				covers: [{
					latitude: 39,
					longitude: 116,
					iconPath: '../../../static/img/location'
				}],
				userName: '',
				userPhone: '',
				systemDate: '',
				address: "富强街道",
				amapPlugin: null,
				mapKey: "fbb5ddc12d6183eba23f27639f49757a",
				buttonTitle: '打卡',
				buttonDisabled: true,
				src: '../../static/img/default_protrait.png'
			};
		},
		onLoad () {
			//头像
			if (getApp().globalData.photo.length > 0) {
				this.src = 'http://image.tripln.top/gridfile' + getApp().globalData.photo;
			}
			this.amapPlugin = new amap.AMapWX({
				key: this.mapKey
			})
			this.getLocation();
			this.$http.get('ac/xagrid/appSystemService/getCurrentDate').then((res) => {
				this.systemDate = res.data.formatDate;
			});
			var data = getApp().globalData.userInfo;
			this.userName = data.gridName + data.roleName + data.name;
			this.userPhone = data.mobile;
		},
		methods: {
			getLocation () {
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log("获取地址" + data);
						this.address = data[0].name;
					}

				})
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude
						};
						this.covers = [{
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../../static/img/location'
						}];
						// this.location = formatLocation(res.longitude, res.latitude)
						this.getPunchInfo();

					}
				});
			},
			getPunchInfo () {
				this.$http.post('ac/xagrid/appAttenceService/getPunchInfo', {
					latitude: this.location.latitude,
					longitude: this.location.longitude
				}).then((res) => {
					if (res.data.abnormal === 0) {
						this.buttonTitle = "打卡";
					} else if (res.data.abnormal === 1) {
						this.buttonTitle = "迟到打卡";
					}
					//设置是否可打卡
					if (res.data.status === 0) {
						this.buttonDisabled = false;
					} else {
						this.buttonDisabled = true;
					}
					//跳转设置打卡位置
					if (res.data.status === 1) {
						
						uni.redirectTo({
							url: "../setClockInLocation/setClockInLocation"
						})

					}
				})
			},
			clockInAction () {
				if (this.buttonTitle == "打卡") {
					this.$http.post('ac/xagrid/appAttenceService/createPunch', {
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						address: this.address
					}).then((res) => {
						if (res.errcode === '0') {
							uni.showModal({
								title: '提示',
								content: '打卡成功',
								showCancel: false,
								complete () {
									uni.navigateBack({})
								}
							})
							
						} else {
							uni.showModal({
								title: "提示",
								content: res.errmsg,
							})
						}
					})
				} else if (this.buttonTitle == "迟到打卡") {
					uni.navigateTo({
						url: "../clockInLate/clockInLate?latitude=" + this.location.latitude + "&longitude=" + this.location.longitude + "&address=" + this.address
					})
				}
			},
			setNewLocation () {
                uni.redirectTo({
                    url: "../setClockInLocation/setClockInLocation"
                })
			}
		}
	}
</script>

<style>
    .bgView {
        width: 100%;
        height: 100%;
    }

    .header {
        width: 90%;
        height: 100upx;
        background-color: #FFFFFF;
        margin: 20upx 20upx 20upx 20upx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-radius: 10upx;
        box-shadow: 0 0 5upx 5upx #D9D9D9;
        padding: 20upx;
    }

    .user {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .userInfo {
        display: flex;
        flex-direction: column;
        margin: auto;
        margin-left: 10upx;
    }

    .time {
        margin: 20upx;
    }

    .lineH20 {
        height: 20upx;
        width: 100%;
        background-color: #F7F7F7;
    }

    .locationView {
        padding: 0 20upx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .locationInfo {
        display: flex;
        flex-direction: row;
    }

    .getLocation {
        color: #007AFF;
    }

    .locationTitle {
        margin-left: 20upx;
        color: #888888;
    }

    map {
        width: 100%;
        height: 450upx;
        margin-top: 10upx;
    }

    button {
        margin: 30upx;
    }

    image {
        width: 100upx;
        height: 100upx;
        border-radius: 50%
    }

    .resave-local {
        position: absolute;
        bottom: 20upx;
        width: 100%;
        text-align: center;
        color: rgb(86, 185, 140);
    }
</style>
